<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php学习笔记[048]</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="show"><span>048 ajax和php的快速上手及应用(一)</span></div>
<?php include 'include/top.php';?>
<div class="text">
<b>ajax</b>
<strong>ajax</strong>由<strong>HTML</strong>、<strong>JavaScript™</strong> 技术、<strong>DHTML</strong> 和 <strong>DOM</strong> 组成，这一杰出的
方法可以将笨拙的 Web 界面转化成交互性的 <strong>Ajax</strong> 应用程序。我们简易的做下面的交互原理图：<br />
<strong>web页面</strong>←触发脚本→<strong>javascript</strong>←反应执行→<strong>php文件</strong><br />
<b>XMLHttpRequest()</b>
对于<strong>Ajax</strong>，最核心的一个对象是<strong>XMLHttpRequest</strong>，所有的Ajax操作都离不开对这个对象的操作，我们来看怎么创建这个实例<br />
非ie浏览器：<strong>xmlHttp = new XMLHttpRequest();</strong><br />
ie浏览器：<strong>xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');</strong>
</div>
<div class="text">
<b>XMLHttpRequest对象相关方法</b>
<strong>XMLHttpRequest</strong>对象相关方法我们今天解释3个：<br />
<strong>XMLHttpRequest.open</strong>(传递方式,地址,是否异步请求)//打开请求<br />
<strong>XMLHttpRequest.onreadystatechange</strong>//准备就绪<br />
<strong>XMLHttpRequest.responseText</strong>//获取执行结果<br />
我们用一个实例来演示这些函数的用法：
1.我们在file/目录下建立一个s048_1.js的文件里面的代码如下:
<div class="code">
var xmlHttp;	//定义xmlHttp这个变量<br />
  function s_xmlhttprequest()	//建立实例化函数<br />
{<br />
if(window.ActiveXObject)	//判断是否支持微软的控件<br />
{<br />
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');	//实例化 <br />
}<br />
else if(window.XMLHttpRequest)	//判断是否支持标准浏览器的js解译<br />
{<br />
xmlHttp = new XMLHttpRequest();	//实例化函数<br />
}<br />
}<br />
function fun(url)	//建立fun函数<br />
{<br />
s_xmlhttprequest();	//引入实例化函数<br />
xmlHttp.open(&quot;GET&quot;,&quot;file/s048_2.php?con=&quot;+url,true);	//打开ajax<br />
xmlHttp.onreadystatechange= byphp;<br />
xmlHttp.send(null); <br />
}<br />
function byphp()<br />
{<br />
var byphp = xmlHttp.responseText;<br />
document.getElementById('id').innerHTML = byphp;<br />
<br />
}
</div>
2.我们在file文件夹下面建立一个s048_2.php的文件，里面的内容如下：<br />
<div class="code">
&lt;?php<br />
for($i=0;$i&lt;10;$i++)<br />
{<br />
echo $_GET['con'];<br />
}<br />
echo '&lt;br&gt;';<br />
?&gt; </div>
我们在本页使用ajax的js文件和函数来达到我们想要的结果：<br />
<div class="code">
&lt;span onclick=&quot;fun('A')&quot;&gt;A&lt;/span&gt;<br />
&lt;span onclick=&quot;fun('B')&quot;&gt;B&lt;/span&gt;<br />
&lt;span onclick=&quot;fun('C')&quot;&gt;C&lt;/span&gt;&lt;br /&gt;<br />
&lt;SPAN id=&quot;id&quot;&gt;&lt;/SPAN&gt;</div>
我们分别来点击下面的字符，在页面没有刷新的情况下我们获得了php程序返回的内容。
<div class="effect">
<script type="text/javascript" src="file/s048_1.js"></script>
<span onclick="fun('A')">A</span>
<span onclick="fun('B')">B</span>
<span onclick="fun('C')">C</span><br />
<SPAN id="id"></SPAN>
</div>
</div>



</body>
</html>
